{% extends "layout.html" %}
{% block body %}
  	
	<div class="container container-fluid">
		<div >
     

           
              <form id ="myForm"  action="/result" method = "POST">
                 <div>
                                 <button class = "btn btn-info btn-block" >Vocavola</button>
                

          <div class="range ">
          
            <p class="h3"> input your level </p>
            <output id="yourlevel-o">60 </output>
            <input type="range" class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="yourlevel" name = "yourlevel" min="1" max="360" value={{yourlevel}} >
            
           
            </div>

        </div>
                
            </form>

    
   
		</div>
		
	</div>
	<script type="text/javascript">
	function formSubmit()
	  {
	  document.getElementById("myForm").submit()
	  }
	</script>

<script type="text/javascript">
  var slider = document.getElementById("yourlevel");
var output = document.getElementById("yourlevel-o");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

 {% endblock %}

